<template>
	<view class="content">
		<uni-search-bar @confirm="search" v-model="keyword"  @clear="clear" :focus="true"></uni-search-bar>

		<uni-list>
			<uni-list-item v-for="res in list" :title="res.name" :note="列表描述信息" 
			:thumb="resImg(res)" thumb-size="lg" :rightText="res.typeName" 
			link :to="'/pages/res/detail?id='+res.id"></uni-list-item>
		</uni-list>
		<uni-load-more iconType="circle" :status="status" @clickLoadMore="loadMore"/>
	</view>
</template>

<script setup>
import config from '@/config'
	import {
		ref
	} from "vue";

	import {
		listResource
	} from "@/api/resource.js"

	const keyword=ref(null);
	const list=ref([]);
	const status=ref('no-more');
	const page=ref(1);
		  
	function search() {
		page.value = 1;
		list.value = [];
		loadMore();
	}

	function clear(res) {
		search()
	}
	function loadMore(){
		status.value = 'loading';
		listResource({
			pageNum: page.value,
			pageSize: 10,
			orderByColumn: 't.upload_time',
			isAsc: 'DESC',
			searchValue:keyword.value
		}).then(res=>{
			list.value = list.value.concat(res.rows);
			if(res.rows && res.rows.length >= 10){
				status.value = 'more';
			}else{
				status.value = 'no-more';
			}
		})
	}
	
	function resImg(res){
		if(res.thumb){
			return config.baseUrl+'/profile/'+res.thumb;
		}else{
			return config.baseUrl+'/statics/images/none.jpg';
		}
	}
	search()
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}
</style>